<template>
  <div class="page-content">
    <button @click="goBack" v-show="isShow">返回上一页</button>
    <div class="comm-content" ref="main"></div>
  </div>
</template>
<script>
import getMapName from "../../public/getMapName.js";
export default {
  data() {
    return {
      myEcharts: null,
      isShow: false,
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      this.myEcharts.dispose();
      this.initEcharts();
      this.isShow = false;
    },
    // 适配屏幕
    screen() {
      this.myEcharts.resize();
      // 计算一个文字大小的比例
      let width = this.$refs.main.offsetWidth;
      let num = (width / 100) * 3;
      let options = {
        title: {
          textStyle: {
            fontSize: num,
          },
        },
      };
      // 修改图标样式以后要从重新绘制
      this.myEcharts.setOption(options);
    },
    async initEcharts() {
      let main = this.$refs.main;
      this.myEcharts = this.$echarts.init(main,this.themeStatus);
      let mapData = await this.$http("http://localhost:8080/map/china.json");
      // console.log();
      this.$echarts.registerMap("china", mapData.data);
      console.log(mapData);
      //   console.log(dataList);
      /** @type EChartsOptions */
      let options = {
        title: {
          text: "各地区农作物覆盖面积",
          //  subtext:this.dataList.data.MainPlants + '万亩'
        },
        tooltip: {
          // 小提示
          show: true,
        },
        visualMap: {
          show: true,
          calculable: true, // 是否显示手柄
          max: 400, // 最大值
          min: 100, // 最小值
          color: ["#0F3357", "#36BFE5"], // 颜色
        },
        series: [
          {
            type: "map",
            map: "china",
            zoom: 1.2, // 显示地图的大小
            // center:'' // 以哪个经纬度为中心点
            // data: dataList.data.content,
            label: {
              show: true,
            },
          },
        ],
      };
      this.myEcharts.setOption(options);
      // 给地图添加一个点击事件
      this.myEcharts.on("click", async (city) => {
        let cityName = getMapName(city.name);
        // console.log(cityName);
        if (!cityName.name) {
          return;
        }
        let cityList = await this.$http("http://localhost:8080" + cityName.path);
        this.$echarts.registerMap(cityName.name, cityList.data);
        let options = {
          series: [{ type: "map", map: cityName.name }],
        };
        this.myEcharts.setOption(options);
        this.isShow = true;
      });
    },
    async getData() {
      let dataList = await this.$http("/api/CropCoverage");
      console.log(dataList);
      this.setEcharts(dataList);
    },
    setEcharts(dataList) {
      let options = {
        title: {
          subtext: dataList.data.MainPlants + "万亩",
          subtextStyle: {
            fontSize: 20,
            color:'block'
          },
        },
        series: [
          {
            data: dataList.data.content,
          },
        ],
      };
      this.myEcharts.setOption(options);
    },
  },
  mounted() {
    this.initEcharts();
    this.getData();
    window.addEventListener("resize", this.screen);
    this.screen();
  },
  destroyed() {
    window.removeEventListener("reset", this.screen);
  },
  watch: {
    themeStatus() {
      this.myEcharts.dispose();
      this.initEcharts();
      this.getData();
      this.screen();
    },
  },
  computed: {
    // 计算属性
    themeStatus() {
      return this.$store.state.theme;
    },
  },
  filters: {},
  components: {},
};
</script>
<style scoped>
.page-content {
  position: relative;
}
button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 99999;
}
</style>
